<template>
  <el-container class="smart-city-container">
    <!-- 顶部Header -->
    <el-header class="city-header">
      <div class="header-left">
        <span class="city-name">智慧城市管理平台</span>
      </div>
      <!-- </div> -->
      <div class="header-right">
        <div>
          <el-dropdown>
            <span class="user-info">
              <el-avatar
                :size="36"
                src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
              />
              <span class="username">管理员</span>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>个人中心</el-dropdown-item>
                <el-dropdown-item>系统设置</el-dropdown-item>
                <el-dropdown-item divided @click="handleLogout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
        <div class="locals">
          <el-dropdown>
            <el-button type="">{{ $t('selectLang') }}</el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="hanldeChangeLang('zh')">中文</el-dropdown-item>
                <el-dropdown-item divided @click="hanldeChangeLang('en')">English</el-dropdown-item>
                <el-dropdown-item divided @click="hanldeChangeLang('tc')">繁体</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
      <!-- </div> -->
    </el-header>

    <el-container>
      <!-- 侧边Aside -->
      <el-aside width="220px" class="city-aside">
        <el-menu
          :default-active="$route.path"
          active-text-color="#409EFF"
          background-color="#1f313b"
          text-color="#fff"
          router
        >
          <template v-for="route in menuRoutes" :key="route.path">
            <el-menu-item v-if="!route.meta?.parent" :index="route.path">
              <el-icon><component :is="route.meta?.icon || 'menu'" /></el-icon>
              <!-- <span>{{ route.meta?.menuName || route.name }}</span> -->
              <span>{{ $t(route.title) }}</span>
            </el-menu-item>
            <el-sub-menu v-else :index="route.meta.parent">
              <template #title>
                <el-icon><component :is="route.meta?.icon || 'menu'" /></el-icon>
                <!-- <span>{{ route.meta.parent }}</span> -->
                <span>{{ $t(route.title) }}</span>
              </template>
              <el-menu-item :index="route.path" style="padding-left: 70px !important">
                <!-- {{ route.meta.menuName }} -->
                <span>{{ $t(route.title) }}</span>
              </el-menu-item>
            </el-sub-menu>
          </template>
        </el-menu>
      </el-aside>

      <!-- 主内容Main -->
      <el-main class="city-main">
        <!-- 面包屑 -->
        <Breadcrumb />
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
  import Breadcrumb from './breadcrumb.vue'
  import { useI18n } from 'vue-i18n'
  import { computed } from 'vue'
  import { useRouter } from 'vue-router'

  const { locale } = useI18n()
  const router = useRouter()

  // 计算菜单路由
  const menuRoutes = computed(() => {
    const mainRoute = router.options.routes.find(route => route.path === '/')
    return mainRoute?.children || []
  })

  const hanldeChangeLang = type => {
    locale.value = type
    localStorage.setItem('lang', type)
  }

  // 处理退出登录
  const handleLogout = () => {
    // 清除登录状态
    localStorage.removeItem('token')
    
    // 跳转到登录页
    router.push('/login')
  }
</script>

<style scoped>
  .smart-city-container {
    height: 100vh;
    overflow: hidden;
  }

  /* 选中菜单项样式 */
  .el-menu-item.is-active {
    background-color: #7e7e7e59 !important;
  }

  .city-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #1f313b;
    color: #fff;
    padding: 0 20px;
    border-bottom: 1px solid #ccc;
  }

  .city-name {
    font-size: 20px;
    font-weight: bold;
  }

  .user-info {
    display: flex;
    align-items: center;
    cursor: pointer;
  }

  .username {
    margin-left: 10px;
  }

  .city-aside {
    background-color: #1f313b;
    height: calc(100vh - 60px);
  }

  .city-main {
    padding: 10px;
    height: calc(100vh - 60px);
    overflow-y: auto;
    /* background-color: #041c41; */
  }
  .header-right {
    display: flex;
  }
  .locals {
    margin-left: 20px;
  }
</style>
